<template>
  <el-container>
    <el-header>
      <!-- 头部 -->
      <i class="el-icon-s-fold">首页</i>
      <section>
        <i class="el-icon-mobile-phone">下载中心</i>
        <i class="el-icon-user">{{this.$store.state.loginName}}</i>
        <tuichu></tuichu>
      </section>
      <!--头部结束  -->
    </el-header>
    <el-main>
      <!-- 下拉菜单开始 -->
      <el-select v-model="value" placeholder="宝安校区">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <!-- 下拉结束 -->
      <section class="data-area">
        <div class="data-change">
          <p class="more-left">今日数据变动</p>
          <ol class="ol-left">
            <li>
              <!-- 新增学员人数 -->
              <el-popover placement="right" width="400" trigger="click">
                <el-row>
                  <el-button class="stuBtn" type="primary" plain>
                    <p>{{tableData[1]&&tableData[1].name}}</p>
                  </el-button>
                  <el-button class="stuBtn" type="success" plain>
                    <p>{{tableData[2]&&tableData[2].name}}</p>
                  </el-button>
                  <el-button class="stuBtn" type="info" plain>
                    <p>{{tableData[3]&&tableData[3].name}}</p>
                  </el-button>
                  <el-button class="stuBtn" type="warning" plain>
                    <p>{{tableData[4]&&tableData[4].name}}</p>
                  </el-button>
                  <el-button class="stuBtn" type="danger" plain>
                    <p>{{tableData[5]&&tableData[5].name}}</p>
                  </el-button>
                  <el-button class="stuBtn" type="primary" plain>
                    <p>{{tableData[6]&&tableData[6].name}}</p>
                  </el-button>
                </el-row>
                <el-button slot="reference">
                  <p>
                    今日新增学员数
                    <span>6</span> 人
                  </p>
                </el-button>
              </el-popover>
            </li>
            <li>
              <!-- 未支付 -->
              <el-popover placement="right" width="940" trigger="click">
                <el-table :data="tableData" style="width: 100%" height="320">
                  <el-table-column fixed prop="number" label="订单编号" width="100"></el-table-column>
                  <el-table-column prop="name" label="学员姓名" width="100"></el-table-column>
                  <el-table-column prop="keming" label="课程名称" width="100"></el-table-column>
                  <el-table-column prop="moneycount" label="金额" width="80"></el-table-column>
                  <el-table-column prop="youhui" label="优惠" width="80"></el-table-column>
                  <el-table-column prop="qiandan" label="签单金额" width="90"></el-table-column>
                  <el-table-column prop="shishou" label="实收" width="80"></el-table-column>
                  <el-table-column prop="weikuan" label="尾款" width="80"></el-table-column>
                  <el-table-column prop="time" label="交易时间" width="110"></el-table-column>
                  <el-table-column prop="operation" label="操作" width="60"></el-table-column>
                </el-table>
                <el-button slot="reference">
                  <p>
                    未支付订单
                    <span>9</span> 条
                  </p>
                </el-button>
              </el-popover>
            </li>
            <li>
              <!-- 上课学员 -->
              <el-popover placement="right" width="360" trigger="click">
                <el-table :data="xufei">
                  <el-table-column width="100" property="name" label="学员姓名"></el-table-column>
                  <el-table-column width="100" property="keming" label="课程名称"></el-table-column>
                  <el-table-column width="100" property="keshi" label="剩余课时"></el-table-column>
                </el-table>
                <el-button slot="reference">
                  <p>
                    今日上课学员
                    <span>12</span> 条
                  </p>
                </el-button>
              </el-popover>
            </li>
            <li>
              <!-- 上课老师 -->
              <el-popover placement="right" width="360" trigger="click">
                <el-table :data="xufei">
                  <el-table-column width="100" property="name" label="学员姓名"></el-table-column>
                  <el-table-column width="100" property="keming" label="课程名称"></el-table-column>
                  <el-table-column width="100" property="keshi" label="剩余课时"></el-table-column>
                </el-table>
                <el-button slot="reference">
                  <p>
                    今日上课老师
                    <span>9</span> 条
                  </p>
                </el-button>
              </el-popover>
            </li>
            <li>
              <!-- 意向学员新增 -->
              <el-popover placement="right" width="400" trigger="click">
                <el-row>
                  <el-button class="stuBtn" type="primary" plain>
                    <p>{{tableData[1]&&tableData[1].name}}</p>
                  </el-button>
                  <el-button class="stuBtn" type="success" plain>
                    <p>{{tableData[2]&&tableData[2].name}}</p>
                  </el-button>
                  <el-button class="stuBtn" type="info" plain>
                    <p>{{tableData[3]&&tableData[3].name}}</p>
                  </el-button>
                  <el-button class="stuBtn" type="warning" plain>
                    <p>{{tableData[4]&&tableData[4].name}}</p>
                  </el-button>
                </el-row>
                <el-button slot="reference">
                  <p>
                    意向学员新增数
                    <span>4</span> 条
                  </p>
                </el-button>
              </el-popover>
            </li>
          </ol>
          <ol class="ol-right">
            <li>
              <!-- 待续费 -->
              <el-popover placement="right" width="340" trigger="click">
                <el-table :data="xufei">
                  <el-table-column width="100" property="name" label="学员姓名"></el-table-column>
                  <el-table-column width="100" property="keming" label="课程名称"></el-table-column>
                  <el-table-column width="100" property="keshi" label="剩余课时"></el-table-column>
                </el-table>
                <el-button slot="reference">
                  <p>
                    待续费学员
                    <span>7</span> 条
                  </p>
                </el-button>
              </el-popover>
            </li>
            <li>
              <!-- 补齐尾款 -->
              <el-popover placement="right" width="860" trigger="click">
                <el-table :data="tableData" style="width: 100%" height="320">
                  <el-table-column fixed prop="number" label="订单编号" width="90"></el-table-column>
                  <el-table-column prop="name" label="学员姓名" width="90"></el-table-column>
                  <el-table-column prop="keming" label="课程名称" width="100"></el-table-column>
                  <el-table-column prop="moneycount" label="金额" width="80"></el-table-column>
                  <el-table-column prop="youhui" label="优惠" width="60"></el-table-column>
                  <el-table-column prop="qiandan" label="签单金额" width="90"></el-table-column>
                  <el-table-column prop="shishou" label="实收" width="60"></el-table-column>
                  <el-table-column prop="weikuan" label="尾款" width="60"></el-table-column>
                  <el-table-column prop="time" label="交易时间" width="110"></el-table-column>
                  <el-table-column prop="operation" label="操作" width="60"></el-table-column>
                </el-table>
                <el-button slot="reference">
                  <p>
                    待补齐尾款订单
                    <span>8</span> 条
                  </p>
                </el-button>
              </el-popover>
            </li>
            <li>
              <!-- 今日订单 -->
              <el-popover placement="right" width="860" trigger="click">
                <el-table :data="tableData" style="width: 100%" height="320">
                  <el-table-column fixed prop="number" label="订单编号" width="100"></el-table-column>
                  <el-table-column prop="name" label="学员姓名" width="100"></el-table-column>
                  <el-table-column prop="keming" label="课程名称" width="100"></el-table-column>
                  <el-table-column prop="moneycount" label="金额" width="80"></el-table-column>
                  <el-table-column prop="youhui" label="优惠" width="80"></el-table-column>
                  <el-table-column prop="qiandan" label="签单金额" width="90"></el-table-column>
                  <el-table-column prop="shishou" label="实收" width="80"></el-table-column>
                  <el-table-column prop="weikuan" label="尾款" width="80"></el-table-column>
                  <el-table-column prop="time" label="交易时间" width="110"></el-table-column>
                </el-table>
                <el-button slot="reference">
                  <p>
                    今日订单
                    <span>14</span> 条
                  </p>
                </el-button>
              </el-popover>
            </li>
            <li>
              <!-- 今日新单 -->
              <el-popover placement="right" width="860" trigger="click">
                <el-table :data="tableData" style="width: 100%" height="320">
                  <el-table-column fixed prop="number" label="订单编号" width="100"></el-table-column>
                  <el-table-column prop="name" label="学员姓名" width="100"></el-table-column>
                  <el-table-column prop="keming" label="课程名称" width="100"></el-table-column>
                  <el-table-column prop="moneycount" label="金额" width="80"></el-table-column>
                  <el-table-column prop="youhui" label="优惠" width="80"></el-table-column>
                  <el-table-column prop="qiandan" label="签单金额" width="90"></el-table-column>
                  <el-table-column prop="shishou" label="实收" width="80"></el-table-column>
                  <el-table-column prop="weikuan" label="尾款" width="80"></el-table-column>
                  <el-table-column prop="time" label="交易时间" width="110"></el-table-column>
                </el-table>
                <el-button slot="reference">
                  <p>
                    今日新单
                    <span>9</span> 条
                  </p>
                </el-button>
              </el-popover>
            </li>
            <li>
              <!-- 今日续单 -->
              <el-popover placement="right" width="860" trigger="click">
                <el-table :data="tableData" style="width: 100%" height="320">
                  <el-table-column fixed prop="number" label="订单编号" width="100"></el-table-column>
                  <el-table-column prop="name" label="学员姓名" width="100"></el-table-column>
                  <el-table-column prop="keming" label="课程名称" width="100"></el-table-column>
                  <el-table-column prop="moneycount" label="金额" width="80"></el-table-column>
                  <el-table-column prop="youhui" label="优惠" width="80"></el-table-column>
                  <el-table-column prop="qiandan" label="签单金额" width="90"></el-table-column>
                  <el-table-column prop="shishou" label="实收" width="80"></el-table-column>
                  <el-table-column prop="weikuan" label="尾款" width="80"></el-table-column>
                  <el-table-column prop="time" label="交易时间" width="110"></el-table-column>
                </el-table>
                <el-button slot="reference">
                  <p>
                    今日续单
                    <span>7</span> 条
                  </p>
                </el-button>
              </el-popover>
            </li>
          </ol>
        </div>
        <div class="event-remind">
          <span class="more-left">事项提醒</span>
          <span class="more">更多</span>
          <ul class="renew">
            <li>
              <i class="el-icon-star-off"></i> 8:00续费二年级张旭
            </li>
            <li>
              <i class="el-icon-star-off"></i> 8:20续费五年级王申
            </li>
            <li>
              <i class="el-icon-star-off"></i> 9:00续费三年级黄飞宇
            </li>
            <li>
              <i class="el-icon-star-off"></i> 9:40续费二年级陈胜
            </li>
            <li>
              <i class="el-icon-star-off"></i> 12:00续费一年级陈梓童
            </li>
          </ul>
        </div>
        <div class="birthday">
          <span class="more-left">生日学员</span>
          <span class="more">更多</span>
          <ul class="birth">
            <li>
              <img src="../assets/birth1.png" alt />
              <p>林强</p>
              <p>04-18</p>
            </li>
            <li>
              <img src="../assets/birth2.png" alt />
              <p>苏丹</p>
              <p>09-13</p>
            </li>
            <li>
              <img src="../assets/birth2.png" alt />
              <p>何桂英</p>
              <p>03-08</p>
            </li>
            <li>
              <img src="../assets/birth2.png" alt />
              <p>罗静</p>
              <p>11-11</p>
            </li>
          </ul>
        </div>
      </section>
      <section class="course-cancel bottomlong">
        <div class="qiandao">
          <div class="shiqian">
            <p class="kexiao">今日课消</p>
            <section>
              <p>总实签</p>
              <span>140</span>
            </section>
            <section>
              <p>总应签</p>
              <span>200</span>
            </section>
          </div>
          <div class="yingqian">
            <section>
              <p>昨日总实签</p>
              <span>140</span>
            </section>
            <section>
              <p>昨日总应签</p>
              <span>200</span>
            </section>
          </div>
        </div>
        <div class="paike">
          <img src="../assets/circle1.png" />
          <span class="paikeLv">120</span>
          <p>排课签到</p>
        </div>
        <div class="paike-detail">
          <p>已上课: 30</p>
          <p>请 假: 30</p>
          <p>扣课时: 30</p>
          <p>未 签: 30</p>
        </div>
        <div class="linshi">
          <img src="../assets/circle2.png" />
          <span class="linshiZi">40</span>
          <p>临时签到</p>
        </div>
        <div class="renyi">
          <img src="../assets/circle3.png" />
          <span class="renyiTu">40</span>
          <p>任意上课</p>
        </div>
        <span class="shisuan">总实签 = 排课签到 - 未签 - 请假 + 临时签到 + 任意上课</span>
        <span class="yingsuan">总应签 = 排课签到 + 临时签到 + 任意上课</span>
      </section>
      <section class="achievement bottomlong">
        <div class="dayyeji">
          <p class="yeji">今日业绩</p>
          <section>
            <p>今日业绩（元）</p>
            <span>3200</span>
          </section>
          <section>
            <p>昨日业绩（元）</p>
            <span>2600</span>
          </section>
        </div>
        <div id="shanOne" :style="{width: '400px', height: '300px'}"></div>
        <div id="myChart" :style="{width: '460px', height: '280px'}"></div>
      </section>
    </el-main>
  </el-container>
</template>
<script>
import tuichu from '../components/tuichu.vue'
// 树状图
export default {
  components:{
    tuichu
  },
  name: "hello",
  data() {
    // 选择器
    return {
      // 校区
      options: [
        {
          value: "选项1",
          label: "宝安校区",
        },
        {
          value: "选项2",
          label: "南山校区",
        },
        {
          value: "选项3",
          label: "福田校区",
        },
        {
          value: "选项4",
          label: "罗湖校区",
        },
        {
          value: "选项5",
          label: "盐田校区",
        },
      ],
      // 待续费/学员/老师
      xufei: [],
      // 表格订单数据
      tableData: [],
      value: "",
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["充值金额", "消费金额", "退费金额"],
        },
        color: ["#6DD48B", "#3AA0FF"],
        series: [
          {
            name: "2020年",
            type: "bar",
            data: [68000, 28000, 2800],
          },
          {
            name: "2019年",
            type: "bar",
            data: [54000, 24500, 4200],
          },
        ],
      });
    },
    drawBing() {
      // 初始化实例，获取元素
      let shanOne = this.$echarts.init(document.getElementById("shanOne"));
      // 绘制图表
      shanOne.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: [],
        },
        color: ["#6DD48B", "#3AA0FF", "#36CBCB"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "新单金额" },
              { value: 310, name: "订单金额" },
              { value: 234, name: "续单金额" },
            ],
          },
        ],
      });
    },
  },
  // 数据请求
  mounted() {
    this.drawLine();
    this.drawBing();
    // 数据请求
    this.$axios
      .get("/app/mock/264777/example/1598250282723")
      .then((res) => {
        this.xufei = res;
      })
      .catch((err) => console.log(err));
    // 第二次请求
    this.$axios
      .get("/app/mock/264777/example/1598250282724")
      .then((res) => {
        this.tableData = res;
      })
      .catch((err) => console.log(err));
  },
};
</script>

<style scoped>
.el-header {
  height: 65px !important;
  background: #fff;
  line-height: 65px;
  display: flex;
  justify-content: space-between;
  color: #5a5a5a;
  position: relative;
}
.el-icon-s-fold {
  line-height: 65px !important;
}
.el-icon-s-fold:hover {
  color: skyblue;
  cursor: pointer;
}
.el-icon-mobile-phone:hover {
  color: #ff4a06;
  cursor: pointer;
}
.el-icon-user {
  margin-left: 40px;
  margin-right: 20px;
}
.el-icon-user:hover {
  color: skyblue;
  cursor: pointer;
}
.el-main {
  background: #f0f2f5;
  color: #5a5a5a;
}
.el-select {
  width: 160px;
  height: 40px;
  border-radius: 8%;
  background-color: #fff;
  text-align: center;
  line-height: 40px !important;
  position: relative !important;
  left: 920px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.data-area {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  font-family: "PingFangSC-Regular", "PingFang SC" !important;
}
.data-area div {
  height: 333px;
  background-color: #fff;
  margin-right: 20px;
  border-radius: 2%;
  padding: 20px 30px;
}

.data-change {
  width: 457px;
}
.event-remind {
  width: 360px;
}
.birthday {
  width: 360px;
}

.bottomlong {
  margin-top: 20px;
  /* width: 1273px; */
  width: 98%;
  height: 320px;
  background-color: #fff;
}
.data-change ol {
  float: left;
  overflow: hidden;
  margin-right: 10px;
  text-align: center;
}
ol,
ul {
  list-style: none;
}
ol li {
  margin-top: 24px;
  font-size: 14px;
}
.renew li {
  margin-top: 30px;
}
ol span {
  font-size: 20px;
  font-weight: 400 !important;
}
.el-icon-star-off {
  font-weight: 800;
  color: yellow;
  margin-right: 10px;
}

.birth li {
  display: inline-block;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 8px;
  width: 60px;
  height: 100px;
  text-align: center;
}
.birth img {
  width: 100%;
  height: 60%;
}
.more {
  margin-left: 150px;
  cursor: pointer;
}
.more:hover {
  color: #e6c5f3;
}
.more-left {
  font-size: 20px;
  font-weight: 600px;
}
.course-cancel {
  padding: 20px 30px;
  display: flex;
  position: relative;
}
.course-cancel img {
  margin-bottom: 20px;
}
.qiandao {
  width: 240px;
  height: 240px;
  display: flex;
  justify-content: space-between;
  margin-right: 100px;
}
.kexiao,
.yeji {
  font-size: 20px;
  display: inline-block !important;
}
.qiandao section {
  margin-top: 40px;
}
.qiandao span {
  display: inline-block;
  color: #3d88f2;
  font-size: 20px;
  margin-top: 15px;
}
.yingqian {
  margin-top: 28px;
}
.paike,
.linshi,
.renyi {
  text-align: center;
  margin-top: 80px;
}
.linshi,
.renyi {
  margin-left: 150px;
}
.paike-detail {
  margin-top: 40px;
  margin-left: 30px;
}
.paike-detail p {
  margin-top: 22px;
}
.shisuan {
  position: absolute;
  left: 50px;
  top: 286px;
  font-size: 12px;
  color: #949494;
}
.yingsuan {
  position: absolute;
  left: 700px;
  top: 286px;
  font-size: 12px;
  color: #949494;
}
.paikeLv {
  position: absolute;
  left: 393px;
  top: 128px;
}
.linshiZi {
  position: absolute;
  left: 730px;
  top: 128px;
}
.renyiTu {
  position: absolute;
  left: 958px;
  top: 128px;
}
.achievement {
  padding: 20px 30px;
  display: flex;
}
.dayyeji section {
  margin-top: 40px;
}
.dayyeji p {
  margin-bottom: 20px;
}
.dayyeji span {
  font-size: 20px;
  color: #3d88f2;
}
.el-button {
  width: 160px;
  height: 30px;
  outline: none !important;
  text-align: center;
  outline: none !important;
}
.el-button p {
  font-size: 14px !important;
  margin-top: -8px;
}
.stuBtn {
  width: 80px !important;
  overflow: hidden;
  margin-top: 8px;
}
.stuBtn p {
  text-align: center;
  margin-top: -4px !important;
}
</style>
